<template>
  <h1 style="background-image: url(http://1004.website/assets/555-1634ca3f.jpg);">User Management</h1>
  <el-table
    :data="userlist"
    
    style="width: 100%; background-image: url(../../assets/1.jpg)"
    class="table"
    :row-class-name="tableRowClassName"
  >
    <el-table-column
      style="background-color: black"
      class="table"
      label="用户号"
      prop="userId"
    />
    <!-- <el-table-column label="用户号" prop="userId" /> -->
    <!-- <el-table-column label="订单数量" prop="totalNum" /> -->
    <el-table-column prop="address" label="图片" style="height:2%" 
   
    >
    <template #default="scope">
          <el-image
            style="width: 60px;height: 60px;"
            :src="scope.row.cover"
            :preview-src-list="[scope.row.cover]"
            hide-on-click-modal="true"
            preview-teleported="true">
            <template #error>
              <div class="image-slot">
                <el-icon><user /></el-icon>
              </div>
            </template>
        </el-image>
    </template>

     
    </el-table-column>
    
    <el-table-column label="用户名" prop="userName" />
    <!-- <el-table-column label="地址" prop="address" /> -->
    <el-table-column label="电话" prop="phone" />
    <el-table-column>
      <template #header>
        <el-input
          v-model="search"
          size="small"
          placeholder="填写用户名并回车"
          @keydown.enter="finduserbyname"
        />
      </template>
      <template #default="scope">
        <el-button
          size="small"
          class="dingdanxiangqing"
          @click="userdetailopen(scope.$index, scope.row)"
          style="background-color: rgba(11, 95, 136, 0.751); color: white"
          >用户详情</el-button
        >
        <!-- <el-button
            size="small"
            type="danger"
            @click="returnOfBook(scope.$index, scope.row)"
            ></el-button
          > -->
      </template>
    </el-table-column>
  </el-table>
  <user-detail ref="userdetail"></user-detail>
</template>
<script>
import UserDetail from './UserDetail.vue';
export default {
  components: { UserDetail },
  name: "LastIndex",
  data() {
    return {
      userlist: [],
      usercover:[],
      search:''
    };
  },
  methods: {
    loaduserlist() {
      this.$axios.get("/loaduserlist").then((resp) => {
        console.log("用户列表" + resp.data); 
         console.log(resp.data[resp.data.length-1].cover);
        this.userlist = resp.data;
     
        
      });
    },
    finduserbyname() {
        if(this.search==''){
            this.loaduserlist()
        }else{
            var data=new FormData()
        data.append('likename',this.search)
        this.$axios.post('/getusersbylikename',data).then(resp=>{
        
            this.userlist=resp.data
            
        })
        }
        
    },
    userdetailopen(index,row){
      this.$refs.userdetail.centerDialogVisible=true
      console.log(row);
      this.$refs.userdetail.user=row
      console.log(this.$refs.userdetail.user);
    },
    tableRowClassName({ row, rowIndex }) {
      // console.log(rowIndex, row);
   
     
        return "success-rows";
  
    
    },
  },
  mounted: function () {
    this.loaduserlist();
  },
};
</script>
<style scoped>
.img{
  width: 3%;
  height: 2%;
  

}
</style>